<template>
    <div class="menu-table-list">
        <el-row class="table-title">
            <el-col  v-for="item in titleArray" :key="item.label">
            {{item.label}}</el-col>
        </el-row>
        <el-row class="">
              <el-tree
      :data="data5"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <div class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ data.label }}</span>
        <span>{{data.create_time}}</span>
        <span>{{data.update_time}}</span>
         <span>{{data.update_time}}</span>
        <span width="100px">
           <el-button
            type="text"
            size="mini"
            @click="() => seeMenu(node, data)">
            查看
          </el-button>
          <span class="split-line"></span>
          <el-button
            type="text"
            size="mini"
            @click="() => change(node, data)">
            修改
          </el-button>
        </span>
      </div>
    </el-tree>
        </el-row>
    <see-dialog @close="showDialog = false" :showDialog="showDialog" :menuInfo="currentInfo"></see-dialog>
</div>
</template>
<script>
import seeDialog from './SeeDialog'
export default {
    name: 'menuTableList',
    components: {
        seeDialog
    },
    props: {
        titleArray: {
            type: Array,
            default () {
                return [
                    {
                        label: '名称'
                    },
                    {
                        label: '图标'
                    },
                    {
                        label: '类型'
                    },
                    {
                        label: '地址'
                    },
                    {
                        label: '操作'
                    }
                ]
            }
        }
    },
    data () {
        const data = [{
            id: 1,
            label: '一级 1',
            create_time: '2019-1.30',
            update_time: '2019-1.31',
            children: [{
                id: 4,
                label: '二级 1-1',
                create_time: '2019-1.30',
                update_time: '2019-1.31',
                children: [{
                    id: 9,
                    label: '三级 1-1-1',
                    create_time: '2019-1.30',
                    update_time: '2019-1.31'
                }, {
                    id: 10,
                    label: '三级 1-1-2',
                    create_time: '2019-1.30',
                    update_time: '2019-1.31'
                }]
            }]
        }, {
            id: 2,
            label: '一级 2',
            create_time: '2019-1.30',
            update_time: '2019-1.31',
            children: [{
                id: 5,
                label: '二级 2-1',
                create_time: '2019-1.30',
                update_time: '2019-1.31'
            }, {
                id: 6,
                label: '二级 2-2',
                create_time: '2019-1.30',
                update_time: '2019-1.31'
            }]
        }, {
            id: 3,
            label: '一级 3',
            create_time: '2019-1.30',
            update_time: '2019-1.31',
            children: [{
                id: 7,
                label: '二级 3-1',
                create_time: '2019-1.30',
                update_time: '2019-1.31'
            }, {
                id: 8,
                label: '二级 3-2',
                create_time: '2019-1.30',
                update_time: '2019-1.31'
            }]
        }]
        return {
            data5: JSON.parse(JSON.stringify(data)),
            showDialog: false,
            currentInfo: {}
        }
    },
    methods: {
        remove (node, data) {
        },
        change (node, data) {
            this.$emit('change', data)
        },
        seeMenu (node, data) {
            this.showDialog = true
            this.currentInfo = data
        }
    }
}
</script>
<style lang="less">
.menu-table-list {
    .table-title {
        text-align: center;
        font-size: 16px;
        font-weight:  bold;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        .el-col{
            width: 20%;
            float:left;
            text-align: center;
        }
    }
    .el-tree > [role="treeitem"]{
        border-bottom: 1px solid #eee;
    }
    .el-tree-node__content {
        width: 100%;
        position: relative;
        box-sizing: border-box;
        height: 40px;
        line-height: 40px;
        .el-icon-caret-right {
            position: relative;
            z-index: 10
        }
        .el-checkbox {
            position: relative;
            z-index: 10;
        }
        .custom-tree-node {
            position: absolute;
            z-index: 5;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            span {
                flex: 1;
                text-align: center;
                font-size: 14px;
            }
        }
    }
}
</style>
